define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    var canvas = document.getElementById("canvas")
    var context = canvas.getContext("2d")

    var RADIUS = 300;
    var count = 14;

    var center = [canvas.clientWidth/2, canvas.clientHeight/2];

    var pi = Math.PI;
    var rad = pi/2/count;

    var points = [[],[],[],[]];

    var strokeStyle = "#fa0483";
    var strokeWidth = 2;

    // get point coordinate
    for (var i = 0; i <= count; i++)
    {
        var offsetX = RADIUS * Math.sin(rad*i);
        var offsetY = RADIUS * Math.cos(rad*i);
        points[0].push([parseInt(center[0] + offsetX), parseInt(center[1] - offsetY)]);
        points[2].push([parseInt(center[0] - offsetX), parseInt(center[1] + offsetY)]);
    }

    for (var i = 0; i <= count; i++)
    {
        var offsetX = RADIUS * Math.cos(rad*i);
        var offsetY = RADIUS * Math.sin(rad*i);
        points[1].push([parseInt(center[0] + offsetX), parseInt(center[1] + offsetY)]);
        points[3].push([parseInt(center[0] - offsetX), parseInt(center[1] - offsetY)]);
    }

    //draw point
    // for (var i = 0; i < 4; i++)
    // {
    //     for (var j = 0; j <= count; j++)
    //     {
    //         context.beginPath();
    //         context.arc(points[i][j][0], points[i][j][1], 2, 0 , 2*pi);
    //         context.closePath();

    //         if (j === 0 || j === count)
    //             context.fillStyle = "#ff2080";
    //         else
    //             context.fillStyle = "#aaaaaa"

    //         context.fill();
    //     }
    // }

    function heartFrame3(count) {

    // draw line
    for (var i = 0; i <= count; i++)
    {
        context.beginPath()
        context.moveTo(points[0][i][0], points[0][i][1])
        context.lineTo(points[1][i][0], points[1][i][1])

        context.strokeStyle = strokeStyle
        context.lineWidth = strokeWidth
        context.stroke()

        context.beginPath()
        context.moveTo(points[2][i][0], points[2][i][1])
        context.lineTo(points[3][i][0], points[3][i][1])

        context.strokeStyle = strokeStyle
        context.lineWidth = strokeWidth
        context.stroke()
    }

    }
    var reversePoints = [
        points[0].slice(0).reverse(),
        points[1].slice(0).reverse(),
        points[2].slice(0).reverse(),
        points[3].slice(0).reverse()
    ]


    function heartFrame1(count) {

    for (var i = 1; i <= parseInt(count / 2); i++)
    {
        context.beginPath()
        context.moveTo(points[0][i][0], points[0][i][1])
        context.lineTo(points[2][i*2][0], points[2][i*2][1])

        context.strokeStyle = strokeStyle
        context.lineWidth = strokeWidth
        context.stroke()

        context.beginPath()
        context.moveTo(reversePoints[3][i][0], reversePoints[3][i][1])
        context.lineTo(reversePoints[1][i*2][0], reversePoints[1][i*2][1])

        context.strokeStyle = strokeStyle
        context.lineWidth = strokeWidth
        context.stroke()
    }


    }

    function heartFrame2(count) {
        for (var i = (count + 1) % 2; i < parseInt(count / 2); i++)
    {
        context.beginPath()
        context.moveTo(points[0][Math.ceil(count / 2) + i][0], points[0][Math.ceil(count / 2) + i][1])
        context.lineTo(points[3][i*2 + count % 2][0], points[3][i*2 + count % 2][1])

        context.strokeStyle = strokeStyle
        context.lineWidth = strokeWidth
        context.stroke()

        context.beginPath()
        context.moveTo(reversePoints[3][Math.ceil(count / 2) + i][0], reversePoints[3][Math.ceil(count / 2) + i][1])
        context.lineTo(reversePoints[0][i*2 + count % 2][0], reversePoints[0][i*2 + count % 2][1])

        context.strokeStyle = strokeStyle
        context.lineWidth = strokeWidth
        context.stroke()
    }
    }


        // heartFrame1(4)
        // heartFrame2(count)
        // heartFrame3(count)

    var k = 0;
    var interval = setInterval(function() {

        k++;
        if (k=== count) {
            clearInterval(interval)
        }

        context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
        heartFrame1(k)

        if (k/2 > (k + 1) % 2)
            heartFrame2(k)
        else
            heartFrame2(count)
        heartFrame3(k)


    }, 1000 / 60)

  }

  return main;
})
